<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>处理边界情况</title>
    <script src="../vue.js"></script>
  </head>
  <body>
    <!-- 1 访问元素 & 组件 -->
    <!-- 1.1 访问根实例 -->
    <div id="app1" style="border: 1px dashed blue;margin-bottom: 2px;">
      <!-- 获取根组件的数据 -->
      {{this.$root.foo}} <br>
      {{this.$root.bar}} <br />
      <!-- 调用 baz() 方法 -->
      <input type="button" @click="baz2()" value="call baz()" />
    </div>
    <!-- 1.2 访问父级组件实例 -->
    <!-- 1.3 访问子组件实例或子元素 -->
    <!-- 1.4 依赖注入 -->
    <!-- 2 程序化的事件侦听器 -->
    <!-- 3 循环引用 -->
    <!-- 3.1 递归组件 -->
    <!-- 3.2 组件之间的循环引用 -->
    <!-- 4 模板定义的替代品 -->
    <!-- 4.1 内联模板 -->
    <!-- 4.2 X-Template -->
    <!-- 5 控制更新 -->
    <!-- 5.1 强制更新 -->
    <!-- 5.2 通过 v-once 创建低开销的静态组件 -->
    <script type="text/javascript">
      // 1 访问元素 & 组件
      // 1.1 访问根实例
      //   Vue 根实例
      //   所有的子组件都可以将这个实例作为一个全局 store 来访问或使用
      new Vue({
        el: '#app1',
        data: {
          foo: 1
        },
        computed: {
          bar: function() {
            // 获取根组件的数据
            console.log(this.$root.foo)
            // 写入根组件的数据
            this.$root.foo = 2
            return this.$root.foo + 1
          }
        },
        methods: {
          baz: function() {
            // 访问根组件的计算属性
            return "this.$root.bar = " + this.$root.bar
          },
          baz2: function() {
            // 调用根组件的方法
            alert("调用根组件的方法：" + this.$root.baz())
          }
        }
      })
      
      // 1.2 访问父级组件实例
      //   this.$parent.map
      // 1.3 访问子组件实例或子元素
      /* 
        // 为子组件赋予 ref 属性值，作为该子组件的 ID 引用
        <sub-cmt ref="usernameCmt"></sub-cmt>
        // 访问/引用上述的子组件：
        this.$refs.usernameCmt
        // 用来从父级组件聚焦输入框
        this.$refs.usernameCmt.focus()
      */
      
      // 1.4 依赖注入
      // 2 程序化的事件侦听器
      // 3 循环引用
      // 3.1 递归组件
      // 3.2 组件之间的循环引用
      // 4 模板定义的替代品
      // 4.1 内联模板
      // 4.2 X-Template
      // 5 控制更新
      // 5.1 强制更新
      // 5.2 通过 v-once 创建低开销的静态组件
    </script>
  </body>
</html>
